{% extends 'base.html' %}
{% block banner %}
    {% ifequal all_articles.number 1 %}
    <div id="page" class="carousel carousel-slider center index-cover" data-indicators="true" style="margin-top: -64px;">
    <div class="carousel-item red white-text bg-cover about-cover">
        <div class="container">
            {% include 'banner.html' %}
            <!-- 开始阅读 和 社交链接 -->
            <div class="cover-btns">
                <a href="#indexCard" class="waves-effect waves-light btn">
                    <i class="fas fa-angle-double-down"></i>开始阅读
                </a>
            </div>
            <div class="cover-social-link">
                <a href="mailto:{{ SITE_MAIL }}" class="tooltipped" target="_blank" data-tooltip="邮件联系我" data-position="top" data-delay="50">
                    <i class="fas fa-envelope-open"></i>
                </a>
                <a href="/article/" class="tooltipped" target="_blank" data-tooltip="文章更新动态" data-position="top" data-delay="50">
                    <i class="far fa-calendar-alt"></i>
                </a>
            </div>
        </div>
    </div>
</div>
        {% else %}
        <div class="bg-cover pd-header about-cover">
            {% include 'banner.html' %}
        </div>
    {% endifequal %}
{% endblock %}

{% block contents %}
    {% ifequal all_articles.number 1 %}
    <div id="indexCard" class="index-card">
    <div class="container ">
        <div class="card">
            <div class="card-content">
                <div class="dream">
                    <div class="title center-align">
                        <i class="far fa-lightbulb"></i>&nbsp;&nbsp;宁静致远
                    </div>

                    <div class="row">
                        <div class="col l8 offset-l2 m10 offset-m1 s10 offset-s1 center-align text">
                            __画船听雨：你看得到我打在屏幕上的字，看不到我落在键盘上的泪。  Kali Linux：The quieter you become, the more you are able to hear.  冰心：成功的花，人们只惊羡她现时的明艳！然而当初她的芽儿，浸透了奋斗的泪泉，洒遍了牺牲的血雨。
                        </div>
                    </div>
                </div>

                <div id="recommend-sections" class="recommend">
                    <div class="title"><i class="far fa-thumbs-up"></i>&nbsp;&nbsp;推荐文章</div>
                    <div class="row">
                        {% for i in top_articles %}
                        <div class="col s12 m6" >
                            <div class="post-card" style="background-image: url('{{ i.cover }}')">
                                <div class="post-body">
                                    <div class="post-categories">

                                    <a href="{% url 'article_category' i.category_id %}" class="category">{{ i.category }}</a>

                                </div>
                                    <a href="{% url 'detail' i.id %}">
                                        <h3 class="post-title">{{ i.title }}</h3>
                                    </a>
                                    <p class="post-description">
                                        {{ i.desc }}
                                    </p>
                                    <a href="{% url 'detail' i.id %}" class="read-more btn waves-effect waves-light" style="background: linear-gradient(to right, #FF5E3A 0%, #FF2A68 100%)" target="_blank">
                                        <i class="icon far fa-eye fa-fw"></i>阅读更多
                                    </a>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    {% endifequal %}

    <main class="content" class="col s12 m12 l9">
    <article id="articles" class="container articles">
        <div class="row article-row">
            {% for article in all_articles.object_list %}
            <div class="article col s12 m6 l4" data-aos="zoom-in">
                <div class="card">
                    <a href="{% url 'detail' pk=article.id %}">
                        <div class="card-image">
                            <img src="{{ article.cover }}" class="responsive-img" alt="{{ article.title }}">
                            <span class="card-title">{{ article.title }}</span>
                        </div>
                    </a>
                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            {{ article.desc }}
                        </div>
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>{{ article.add_time | date:"Y-m-d"}}
                            </span>
                            <span class="publish-author">
                                <i class="fas fa-bookmark fa-fw icon-category"></i>
                                <a href="{% url 'article_category' article.category_id %}" class="post-category">
                                    {{ article.category }}
                                </a>
                            </span>
                        </div>
                    </div>
                    <div class="card-action article-tags">
                        {% for tag in  article.tag.all %}
                        <a href="{% url 'article_tag' tag.id %}">
                            <span class="chip tag-color">{{ tag }}</span>
                        </a>
                        {% endfor %}
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </article>
</main>
{% endblock %}

{% block pagination %}
    <div class="container paging">
        <div class="row">
            <div class="col s6 m4 l4">
                {% if all_articles.has_previous %}
                <a href="?{{ all_articles.previous_page_number.querystring }}" class="left btn-floating btn-large waves-effect waves-light left-color">
                    {% else %}
                <a class="left btn-floating btn-large disabled">
                {% endif %}
                    <i class="fas fa-angle-left"></i>
                </a>
            </div>


            <div class="page-info col m4 l4 hide-on-small-only">
                <div class="center-align b-text-gray">{{ all_articles.number }} / {{ all_articles.pages | last }}</div>
            </div>

            <div class="col s6 m4 l4">
                {% if all_articles.has_next %}
                <a href="?{{ all_articles.next_page_number.querystring }}" class="right btn-floating btn-large waves-effect waves-light right-color">
                {% else%}
                <a class="right btn-floating btn-large disabled">
                {% endif %}
                    <i class="fas fa-angle-right"></i>
                </a>
            </div>

        </div>
    </div>
    {% endblock %}